<template>
    <view class="pay_container">
        <!-- 结算页面 -->
        <view v-if="ispaymentshow">
            <!-- 头部 -->
            <view class="topcont">
                <view class="baise">
                </view>
                <h3>交货收款成功</h3>
            </view>
            <!-- 内容 -->
            <view class="content">
                <view class="price"><span class="label">¥</span>{{ needPay }}</view>
                <p>
                    <span>承运单号：</span>
                    <span>{{ goodsList.billNo }}</span>
                </p>
                <p>
                    <span>交货时间：</span>
                    <span>{{ dayjs(goodsList.creaTetime).format('YYYY-MM-DD') }}</span>
                </p>
                <p>
                    <span>付款方式：</span>
                    <span>聚合支付</span>
                </p>
            </view>
            <!-- 继续开单确认，页面导航到列表页 -->
            <nut-button class="danhaobtn02" plain round color="#0966FF" @click="onsureclick">回到页面</nut-button>
        </view>

        <view v-if="!ispaymentshow">
            <view class="weixincontent">
                <h2><span>¥</span> {{ needPay }}</h2>
                <span class="lookdetail" @click="lookDetailInfo">查看明细</span>
                <view class="erweima">
                    <view v-if="issuccess == false && isfail == false">
                        <qrCode v-if="codeUrl" :text="codeUrl" :qrWidth="400"></qrCode>

                        <view style="text-align: center;width: 100%;height: 400rpx;line-height: 400rpx;" v-else>
                            二维码获取失败
                        </view>

                        <view class="tubiao">
                            <image class="img1" src="../../assets/images/支付宝@3x.png" />
                            <image class="img1" src="../../assets/images/微信@3x.png" />
                            <image class="img1" src="../../assets/images/银联@3x.png" />
                        </view>

                        <p class="shuaxin">
                            15分钟内有效，点击 <span @click="update">刷新</span>
                        </p>
                    </view>
                    <view class="success" v-if="issuccess">
                        <image class="successimg" src="../../assets/images/打印成功@3x.png" />
                        <p>支付成功</p>
                        <h2><span>¥</span>666</h2>
                    </view>
                    <view class="success fail" v-if="isfail">
                        <image class="successimg" src="../../assets/images/common_icons_info@3x.png" />
                        <p class="cancle">取消支付</p>
                        <h2><span>¥</span>{{ needPay }}</h2>
                        <view class="shuaxinerwma" @click="isfail = false">刷新二维码</view>
                    </view>
                </view>
                <view class="zhifu">
                    <nut-radio-group v-model="ischecked" @click="radioClick">
                        <view class="tops">
                            <view class="left">
                                <span class="zhifuspan"></span>
                                <span>聚合支付</span>
                                <span class="zhifuzhong" v-if="Paying">用户支付中…</span>
                            </view>
                            <nut-radio class="right" icon-size="32rpx" label="1"></nut-radio>
                        </view>
                    </nut-radio-group>
                </view>
                <view class="fixbutton">
                    <nut-button class="canclebtn" @click="oncancleclick" plain round>取消</nut-button>
                    <nut-button class="surebtn" color="#0966FF" round @click="getNewList">确认收款</nut-button>
                </view>
            </view>
        </view>

        <DetailModal :isMyShow="isMyShow" @closeDetailInfo="closeDetailInfo" />
    </view>
</template>
      
<script lang="ts" setup>
import { NewPayParam, getPaySrc, payResult } from "@/@api/order";
import useOrderStore from "@/store/order";
import qrCode from '@/components/qrcode/index.vue'
import { onMounted, ref } from "vue";
import useUserStore from "@/store/user";
import Taro from "@tarojs/taro";
import DetailModal from './detailModal.vue'
import dayjs from "dayjs";

const orderStore = useOrderStore()
const userStore = useUserStore()

const goodsList = orderStore.orderInfo
const ispaymentshow = ref(false)
const ischecked = ref('1')
const isfail = ref(false)
const needPay = ref(0)
const issuccess = ref(false)
const codeUrl = ref('')
const Paying = ref(false)
const timer = ref()
const isMyShow = ref(false)

// 待支付费用
orderStore.orderInfo.costList.forEach((t) => {
    let difference = t.money - t.paid;
    needPay.value += difference;
});

// 请求二维码
const params = {
    bill: {
        billNos: [orderStore.orderInfo.billNo],
        money: needPay.value,
        actualMoney: needPay.value,
        serviceCharge: 0,
        btssId: 1,
        btssType: "3",
    },
    device_info: "闽AF087W",
    body: "支付运单3",
    attach: "000003069",
    // total_fee: needPay.value * 100,
    total_fee: 1, // 1019
    branchno: userStore.btStaff.branchCompanyNo,
    paytype: "01",
    eop: "SYSADMIN",
    type: "01",
    v3: "",
    isdebug: "True",
    debug: true,
};

reqGetPaySrc(params);


function oncancleclick() {
    Taro.navigateBack()
}
function getNewList() {
    ispaymentshow.value = true
}
function radioClick() { }
// 刷新二维码
function update() {
    codeUrl.value = "";
    reqGetPaySrc(params);
}

function lookDetailInfo() {
    isMyShow.value = true
}

function closeDetailInfo() {
    isMyShow.value = false
}

function onsureclick() {
    Taro.navigateBack({
        delta: 2
    })
}


// 微信支付
async function reqGetPaySrc(params: NewPayParam) {
    const { data } = await getPaySrc(params);
    if (data.code == 200) {
        let orderId = JSON.parse(data.data).ORDERID
        codeUrl.value = JSON.parse(data.data).QRCODESTRING;
        // 检测是否支付成功
        payReturn(orderId)
    } else {
        codeUrl.value = '';
    }
}

// 支付回调
async function payReturn(e) {
    clearTimeout(timer.value);
    const res = await payResult({ orderid: e })
    if (res.data.code == 200) {
        let data = JSON.parse(res.data.data.data)[0];
        if (JSON.parse(res.data.data.data)[0].STATUSCODE && JSON.parse(res.data.data.data)[0].STATUSCODE == "1") {
            clearTimeout(timer.value);
            ispaymentshow.value = true
        } else {
            timer.value = setTimeout(() => {
                console.log('未支付成功');
                payReturn(e)
            }, 5000)
        }
    }
}




</script>
<style lang="scss">
* {
    box-sizing: border-box;
}

.pay_container {
    box-sizing: border-box;
    width: 100vw;
    height: 100%;
    position: relative;
    background-color: transparent;
    background-color: #efeff4;

    .topcont {
        width: 100vw;
        height: 456rpx;
        background: url('../../assets/images/Slice@3x.png') no-repeat;
        background-size: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .baise {
            width: 108rpx;
            height: 108rpx;
            line-height: 130rpx;
            text-align: center;
            border-radius: 50%;
            background: url('../../assets/images/我要发货/40pt@2x.png') no-repeat center;
            background-color: #fff;
            margin-top: 100rpx;
        }

        h3 {
            font-size: 44rpx;
            margin: 26rpx 0 0;
            color: #fff;
            padding: 0;
        }
    }

    .content {
        box-sizing: border-box;
        width: 620rpx;
        height: 624rpx;
        background-color: #fff;
        border-radius: 16rpx;
        padding: 64rpx 48rpx 0;
        position: absolute;
        left: 66rpx;
        top: 368rpx;

        .price {
            padding: 0;
            margin: 0 0 64rpx;
            text-align: center;
            font-weight: 700;
            color: #252525;
            font-size: 64rpx;
            display: flex;
            justify-content: center;

            .label {
                font-size: 32rpx;
                margin-right: 8rpx;
                margin-top: 20rpx;
            }
        }

        p {
            display: flex;
            padding: 0;
            margin: 0 0 48rpx;
            line-height: 32rpx;
            height: 32rpx;
            font-size: 24rpx;
            color: #666666;
        }
    }

    .danhaobtn,
    .danhaobtn02 {
        position: absolute;
        left: 66rpx;
        // top: 9.06rem;
        bottom: 160rpx;
        width: 620rpx;
        height: 88rpx;
        font-size: 28rpx;
    }

    .danhaobtn02 {
        // top: 10.42rem;
        bottom: 52rpx;
    }

    // 微信支付宝部分
    .weixincontent {
        box-sizing: border-box;
        padding-bottom: 250rpx;
        width: 100%;
        height: 100%;
        overflow: scroll;

        h2 {
            margin: 0 0 12rpx;
            color: #252525;
            font-size: 76rpx;
            line-height: 168rpx;
            display: flex;
            justify-content: center;

            span {
                font-size: 32rpx;
                margin-top: 8rpx;
            }
        }

        .lookdetail {
            text-align: center;
            display: block;
            color: #666666;
            font-size: 24rpx;
            line-height: 32rpx;
            text-decoration: underline;
        }

        .erweima {
            box-sizing: border-box;
            width: 608rpx;
            margin: 32rpx auto 28rpx;
            height: 696rpx;
            border-radius: 24rpx;
            background-color: #fff;
            padding: 64rpx 64rpx 0;

            .tubiao {
                display: flex;
                justify-content: center;
                height: 64rpx;

                .img1 {
                    width: 120rpx;
                    height: 68rpx;

                    &:nth-child(2) {
                        margin: 0 20rpx 0;
                    }
                }
            }

            .shuaxin {
                display: flex;
                justify-content: center;
                margin-top: 40rpx;
                font-size: 22rpx;
                color: #000;
                text-align: center;

                span {
                    color: #0966ff;
                    text-decoration: underline;
                }
            }

            .success {
                width: 100%;
                height: 100%;
                background: url("../../assets/images/高斯模糊@3x.png") no-repeat;
                background-size: 100%;
                display: flex;
                font-size: 32rpx;
                font-weight: 600;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                .successimg {
                    width: 112rpx;
                    height: 112rpx;
                    border-radius: 50%;
                }

                .cancle {
                    color: #fa5151;
                }

                .shuaxinerwma {
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #0966ff;
                    text-decoration: underline;
                }
            }

            .fail {
                background: url("../../assets/images/模糊背景@3x.png") no-repeat;
                background-size: 100%;
            }
        }

        .zhifu {
            width: 608rpx;
            background-color: #fff;
            border-radius: 16rpx;
            margin: 0 auto;

            .tops {
                box-sizing: border-box;
                font-size: 28rpx;
                line-height: 112rpx;
                width: 608rpx;
                color: #252525;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 24rpx 0 24rpx;

                .left {
                    display: flex;
                    // height: 112rpx;
                    align-items: center;

                    .zhifuzhong {
                        color: #999999;
                        margin-left: 25rpx;
                    }

                    span {
                        &:nth-child(1) {
                            display: inline-block;
                            width: 44rpx;
                            height: 44rpx;
                            // border: .02rem solid red;
                            margin-right: 12rpx;
                        }
                    }

                    .zhifuspan {
                        background: url("../../assets/images/资源1411.png") no-repeat 6rpx;
                        background-size: 80%;
                    }

                    .card {
                        background: url("../../assets/images/24pt@3x.png") no-repeat;
                        background-size: 100%;
                    }
                }

                .right {
                    float: right;
                    width: 38rpx;
                    height: 38rpx;
                    // border: .02rem solid red;
                }
            }
        }

        .fixbutton {
            box-sizing: border-box;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 750rpx;
            height: 180rpx;
            background-color: #fff;
            padding: 16rpx 24rpx 0;
            border-top: 2rpx solid rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: space-between;

            .canclebtn,
            .surebtn {
                width: 340rpx;
                height: 80rpx;
                font-size: 28rpx;
            }

            .canclebtn {
                background-color: transparent;
                border: 2rpx solid rgba(0, 0, 0, 0.1);
            }
        }
    }
}
</style>